<template>
  <!-- <div>
  -->
  <scroller lock-x scrollbar-y use-pullup use-pulldown :height="heigh" @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" v-model="status" ref="scroller">
    <div class="box2 ">
      <!-- <panel header="图文组合列表"   :list="list"  type="1"  class="boxafer"></panel>
    -->
    <router-link  :to="{path:'/datascont',query: {id: item.listid}}"  v-for="item in list"  :key="item.id">
      <div class="listswcommitbox" >
        <div class="imgs">
          <img :src="item.src"></div>
        <div class="titlebox">
          <div class="h1title" v-text="item.title"></div>
          <div class="pr h2title">
            <span class="names">By:{{item.desc}}</span>
            <span class="rigtip">
              <i slot="icon"  class="icons iconfont" style="font-size: 15px">&#xe6aa;</i>
              <span class="iconstit" v-text="item.Collection">
              </span>
              <span > <i slot="icon"  class="icons iconfont">&#xe61d;</i>
                {{item.read}}
              </span>
            </span>
          </div>
        </div>
      </div>
  </router-link>
  </div>
  <!-- <Swcchild ></Swcchild>
-->
<div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
  <span v-show="status.pullupStatus === 'default'"></span>
  <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">↑</span>
  <span v-show="status.pullupStatus === 'loading'">
    <spinner type="ios-small"></spinner>
  </span>
</div>
</scroller>

<!-- </div>--></template>

<script>
import { Scroller,Spinner,Panel } from 'vux'
// import Swcchild from './child/swcommit'
export default {
  name:"swc",
  components: {
    Scroller,
    Spinner,
    Panel,
    // Swcchild
  },
  props: ['nf'],
  methods: {
    loadMore () {
      var _this=this;
      setTimeout(() => {
    var cs=[{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '2222',
        desc: '战神',
        url: 'logo'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'xxx',
        desc: 'x行程',
        url: '/component/cell'
      },{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '2222',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'xxx',
        desc: 'x',
        url: '/component/cell'
      },{
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '2222',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: 'xxx',
        desc: 'x',
        url: '/component/cell'
      }];
   _this.list=this.list.concat(cs);
        setTimeout(() => {
          _this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    refresh () {
      var _this=this;
      setTimeout(() => {
        _this.n = 10
        _this.$nextTick(() => {
          setTimeout(() => {
            _this.$refs.scroller.donePulldown()
            _this.pullupEnabled && _this.$refs.scroller.enablePullup()
          }, 10)
        })
      }, 2000)
    },
     scrollsbody() {
      this.scroll = document.body.scrollTop;
      // console.log(this.scroll)
      if ((this.scroll>=180 && this.scroll<=300) ) {
        document.body.scrollTop=180;
        this.heigh=(document.documentElement.clientHeight-117)+"px";
        // console.log( this.swcheignb)
      }else{
        this.heigh=(document.documentElement.clientHeight-300)+"px";
        // console.log("f")
      }
     }
  },
    mounted () {
      this.heigh=(document.documentElement.clientHeight-300)+"px";
      this.$nextTick(function() {
        // document.body.scrollTop=10;
      var _this=this;
      // this.$router.push('/home/')
          window.addEventListener('scroll', _this.scrollsbody)
      })
  },
  data () {
    return {
    type: this.nf,
    scroll:0,
    heigh:"",
        list: [{
        src: 'http://img0.imgtn.bdimg.com/it/u=200295331,1973061185&fm=11&gp=0.jpg',
        title: '深夜食堂的猫',
        desc: '盐爪',
        listid: 1,
        Collection:11,
        read:12
      }, {
        src: 'https://static.vux.li/demo/1.jpg',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
         listid: 1,
        Collection:11,
        read:12
      }, {
        src: 'https://static.vux.li/demo/1.jpg',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          listid: 1,
        Collection:11,
        read:12,
      }, {
        src: 'https://static.vux.li/demo/1.jpg',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        listid: 1,
        Collection:11,
        read:12,
      }, {
        src: 'https://static.vux.li/demo/1.jpg',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
           listid: 1,
        Collection:11,
        read:12,
      }, {
        src: 'https://static.vux.li/demo/1.jpg',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        }
      }],
    // n1: 10,
     // list2: ['精选', '美食', '电影',  '外卖外', '电影', '电影',  '外卖外', '电影'], //切换导航标题
    // index: 0,  //导航默认选项
      // pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
      // status1: {
      //   pullupStatus: 'default',
      //   pulldownStatus: 'default'
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.box2 {
  padding: 10px 15px;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.rotate {
  display: inline-block;
  transform: rotate(-180deg);
}
.pullup-arrow {
  transition: all linear 0.2s;
  color: #666;
  font-size: 25px;
}

.listswcommitbox {
  box-shadow: 0px 3px 10px #999;
  margin-bottom: 20px;
  border-radius: 5%;
  overflow:hidden;
  background-color: #fff;
  .imgs {
    width:100%;
    min-height: 100px;
    max-height: 140px;
    overflow:hidden;
    img {
      width:100%;
    }
  }
  .titlebox {
    padding: 10px 15px;
    .h1title {
      color:#5E646C;
      padding: 15px 0;
    }
    .h2title {
      color:#D7DADF;
      overflow:hidden;
      height:20px;
      .names {
        position:absolute;
        left: 0;
        width:50%;
      }
      .rigtip {
        position:absolute;
        right: 0;
        // vertical-align: sub;
        .iconstit {
          // line-height: 20px;
          vertical-align: middle;
            margin-right: 10px
        }

       }
    }
  }
}
</style>
